<!-- 底部导航栏列表 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="导航列表" name="1">
            <div class="tip-txt">*添加底部导航时，请设置连接页面</div>

            <si-collapse-group
                v-model="tabbarList"
                is-draggable
                :is-add="tabbarList.length < 5"
                is-delete
                add-text="添加导航"
                :add="getAddData"
                :node-title="data => data.text"
            >
                <template #item="{ element, index }">
                    <div class="row-wrap">
                        <div class="left-wrap">
                            文字
                        </div>
                        <div class="right-wrap">
                            <el-input v-model="element.text" placeholder="请输入文字" />
                        </div>
                    </div>

                    <el-divider></el-divider>
                    <div class="row-wrap">
                        <div class="left-wrap">
                            原始图片
                        </div>
                        <div class="right-wrap">
                            <si-image-picker
                                v-model="element.iconPath"
                                type="image"
                                :show-label="false"
                                :size="100"
                            />
                        </div>
                    </div>

                    <el-divider></el-divider>
                    <div class="row-wrap">
                        <div class="left-wrap">
                            按下图片
                        </div>
                        <div class="right-wrap">
                            <si-image-picker
                                v-model="element.selectedIconPath"
                                type="image"
                                :show-label="false"
                                :size="100"
                            />
                        </div>
                    </div>

                    <el-divider></el-divider>
                    <div class="row-wrap">
                        <div class="left-wrap">
                            连接至
                        </div>
                        <div class="right-wrap">
                            <el-select
                                v-model="element.router"
                                size="large"
                                placeholder="请选择"
                            >
                                <!-- 自定义页面组 -->
                                <template v-for="(item, index) in customPageData" :key="index">
                                    <el-option-group :label="item.group">
                                        <template v-for="(pageItem, pageIndex) in item.pages" :key="pageIndex">
                                            <el-option :label="pageItem.name" :value="pageItem.router" />
                                        </template>
                                    </el-option-group>
                                </template>
                            </el-select>
                        </div>
                    </div>
                </template>
            </si-collapse-group>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { useEditStore } from '@/store'
import usePage from '@/libs/edit/pageData'
import {
    SiImagePicker,
    SiCollapseGroup
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'TabbarList',
    components: {
        SiImagePicker,
        SiCollapseGroup
    },
    setup() {
        const editStore = useEditStore()

        const {
            customPageData
        } = usePage()

        const tabbarData = computed(() => editStore.tabbarData)
        const tabbarList = computed({
            get: () => tabbarData.value.list || [],
            set: val => tabbarData.value.list = val
        })

        const getAddData = data => {
            return {
                router: '',
                text: '新页面',
                iconPath: '',
                selectedIconPath: ''
            }
        }

        return {
            customPageData,

            tabbarList,
            getAddData
        }
    }
})
</script>

<style lang="less" scoped>
.tip-txt {
    font-size: 12px;
    color: var(--edit-text-color-regular);
    margin-bottom: 10px;
}
.row-wrap {
    display: flex;
    align-items: center;
    .left-wrap {
        margin-right: 10px;
    }
    .right-wrap {
        flex: 1;
    }
}
</style>